<template>
    <div class="wrapper">
        <div class="box">
            <Form @success="submit" :model="model" :options="options" :loading="loading" submit="提交" reset="清空" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { login, ILoginUser } from '@/api/users';
import { getMyMenus } from '@/api/menus';
const store = useStore();
const router = useRouter();

/**
 * 登录数据模型
 */
const model = ref({});
/**
 * loading
 */
const loading = ref(false);

/**
 * 登录
 * @param user 
 */
const submit = async (user: ILoginUser) => {
    try {
        loading.value = true;
        const result = await login(user);
        store.commit('setUser', result);
        const myMenus = await getMyMenus();
        store.commit('setMyMenus', myMenus);
        router.replace({ name: 'home' });
    } catch (error) { }
    loading.value = false;
}

const options = {
    username: {
        title: '用户名',
        max: 20,
        ph: '请输入{t}',
        required: true,
    },
    password: {
        title: '密码',
        max: 20,
        type: 'password',
        required: true,
        ph: '请输入{t}',
        rules: [{ max: 20, min: 6 }]
    }
}
</script>

<style lang="scss" scoped>
.wrapper {
    height: 100vh;
    position: relative;

    .box {
        border-radius: 3px;
        width: 300px;
        padding: 20px;
        border: 1px solid rgb(46, 45, 45);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>